<template>
	<view>
		<view class="memberinfo">
			<view class="top">
				<view class="con">
					<view class="tit">
						<view class="span">会员名称：<text>{{name}}</text></view>
						<view class="span">手机号：<text>{{phone}}</text></view>
					</view>
					<view class="mass">
						<view>
							
							<view class="em">会员管理预计收益：</view><view class="span">{{sum*0.06}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="web_chose" style="padding: 0 30%;">
			<view class="span" :class="status==30?'on':''" @click="ChangeType(30)">进行中<view class="em"></view>
			</view>
			<view class="span" :class="status==40?'on':''" @click="ChangeType(40)">已赎回<view class="em"></view>
			</view>
		</view> -->


		<view class="wp">
			<view class="account_list">
				<view class="item" v-for="(item,i) in listinfo" :key="i">
					<view class="info_con">
						<view class="top">
							<view class="li">
								<view class="span">存入金额（元）</view>
								<view class="b">{{item.pay_fee}}</view>
							</view>
							<!-- <view class="li">
								<view class="span">赠送积分</view>
								<view class="b">{{item.current.integral}}</view>
							</view> -->
							<view class="li">
								<view class="span">会员管理收益率（{{6}}%）</view>
								<view class="b">{{item.pay_fee*0.06}}</view>
							</view>
						</view>

						<view class="bottom">
							<view class="li">
								<view class="span">{{item.current.start_at}}</view>
								<view class="b">生效日期</view>
							</view>
							<view class="li">
								<view class="span">{{item.current.end_at}}</view>
								<view class="b">到期日期</view>
							</view>
							<view class="li">
								<view class="span lv" v-if="item.status==30">进行中</view>
								<view class="span hong" v-if="item.status==40">已赎回</view>
								<view class="b">当前状态</view>
							</view>
						</view>
					</view>
				</view>




			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 30,
				uid: 0,
				listinfo: [],
				name: '',
				phone: '',
				sum:0,
			}
		},
		onLoad(e) {
			let that = this;
			that.uid = e.id;
			that.name = e.name;
			that.phone = e.phone;
			uni.setNavigationBarTitle({
				title: e.name + '会员明细'
			});
			that.GetList();
		},
		methods: {
			ChangeType: function(num) {
				let that = this;
				that.status = num;
				that.GetList();
			},

			GetList: function(uid) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let _data = {
					status: that.status,
					uid: that.uid
				}
				that.common.http('GET', 'user/pay', _data, function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.listinfo = res.data;					
					that.sum = res.data.reduce((acc, obj) => acc + obj.pay_fee*1, 0);
					
				});
			},
		}
	}
</script>

<style scoped>
	.memberinfo .top {
		background-color: #fff;
		padding: 0 24rpx;
	}

	.memberinfo .con {
		border-radius: 6px;
		background-color: #ffecdb;
		padding: 0 36rpx;
	}

	.memberinfo .con .tit {
		display: flex;
		border-bottom: 1px solid #e8cdb4;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.memberinfo .tit .span {
		font-size: 24rpx;
		color: #333;
	}

	.memberinfo .tit .span text {
		color: #000;
		font-weight: bold;
	}

	.memberinfo .mass {
		padding: 24rpx 0;
	}

	.memberinfo .mass .span {
		font-weight: bold;display: inline-block;
		font-size: 28rpx;
		color: #333;
	}

	.memberinfo .mass .em {
		font-size: 24rpx;display: inline-block;
		color: #333;
		margin-top: 8rpx;
	}

	.web_chose .span.on {
		color: #ac682c;
	}

	.web_chose .span .em {
		background-color: #ac682c;
	}

	.account_list .item {
		padding: 20rpx;
	}

	.account_list .top {
		padding: 0 26rpx;
		height: 136rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f7ff;
		border-radius: 8px;
	}

	.account_list .top .span {
		font-size: 22rpx;
		color: #999;
	}

	.account_list .top .b {
		font-size: 38rpx;
		color: #333;
		margin-top: 12rpx;
		font-weight: bold;
	}


	.account_list .bottom {
		padding: 0 26rpx;
		text-align: center;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.account_list .bottom .span {
		font-size: 28rpx;
		color: #333;
	}

	.account_list .bottom .span.lv {
		color: #0db521;
	}

	.account_list .bottom .span.hong {
		color: #e92211;
	}

	.account_list .bottom .b {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
	}
</style>